<template>
  <inline-Modal
    :visible="visible"
    :title="soucre.title"
    :showOk="isSubmit"
    @ok="handelOk()"
    @cancel="handelCancel()"
  >
    <div class="start-rating-container">
      <div class="present-status" v-if="!isSubmit">
        <div class="name">当前状态：</div>
        <div :class="[checkStatusClass(resultData), 'flow']">
          {{ soucre.statusDesc || "--" }}
        </div>
      </div>
      <div class="examine-container">
        <div class="title">考核信息</div>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="考核指标">
              <a-input disabled v-model="baseInfo.methods"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="五级指标">
              <a-input
                type="textarea"
                disabled
                v-model="baseInfo.assessmentContent"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="判定标准">
              <a-input
                type="textarea"
                disabled
                v-model="baseInfo.determine"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="总分">
              <a-input disabled v-model="baseInfo.singleScore"></a-input>
              <span class="unit">分</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="自评分">
              <a-input disabled v-model="resultData.ownScore"></a-input>
              <span class="unit">分</span>
            </a-form-model-item>
          </a-col>
        </a-row>
      </div>
      <div class="review-materials">
        <div class="title">审查资料</div>
        <div class="list-container">
          <vxe-table
            ref="xTable"
            max-height="200"
            align="center"
            show-overflow
            show-header-overflow
            border="inner"
            :data="tableData"
            :column-config="{ resizable: true }"
            size="small"
            :loading="loading"
          >
            <vxe-column field="orgName" title="责任主体"> </vxe-column>
            <vxe-column field="fileName" title="资料名称"> </vxe-column>
            <vxe-column field="userName" title="上传人"> </vxe-column>
            <vxe-column field="createTime" title="上传时间"> </vxe-column>
            <vxe-column
              field="operate"
              width="120"
              title="操作"
              fixed="right"
              align="left"
            >
              <template #default="{ row }">
                <div class="text-button-group">
                  <a-button type="link" @click="viewFile(row)"> 预览 </a-button>
                  <a-button type="link" @click="downloadFile(row)">
                    下载
                  </a-button>
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
      <div class="score-container">
        <div class="title">专家评分</div>
        <a-row>
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :hideRequiredMark="!isSubmit"
          >
            <a-col :span="24">
              <a-form-model-item label="专家评分" prop="finalScore">
                <a-input-number
                  style="width: 100%"
                  :disabled="!isSubmit"
                  :placeholder="soucre.title == '查看' ? '' : '请输入专家评分'"
                  v-model="form.finalScore"
                  :min="isMinScore"
                  :max="isMaxScore"
                />
                <span class="unit">分</span>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="专家意见">
                <a-input
                  type="textarea"
                  :disabled="!isSubmit"
                  :placeholder="soucre.title == '查看' ? '' : '请输入意见'"
                  :rows="4"
                  v-model="form.finalRemark"
                  :maxLength="255"
                >
                </a-input>
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </a-row>
      </div>
    </div>
    <!-- 附件预览弹窗 -->
    <previewModal
      :visible.sync="previewVisible"
      :loading="previewLoading"
      ref="previewModal"
    ></previewModal>
  </inline-Modal>
</template>

<script>
import { axios } from "@/utils/request";
import { mapGetters } from "vuex";
import { getToken } from "@/utils/TopVUI";
import { downloadDfs } from "@/utils/TopVUI";
import previewModal from "@/pages/document/minio/previewModal";
export default {
  components: {
    previewModal,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    soucre: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      loading: false,
      resultData: {},
      baseInfo: {},
      tableData: [],
      //评分
      form: {
        finalScore: "",
        finalRemark: "",
      },
      rules: {
        finalScore: [
          { required: true, message: "请输入评分", trigger: "blur" },
        ],
      },
      previewVisible: false,
      previewLoading: false,
    };
  },
  computed: {
    isSubmit() {
      return this.soucre?.title == "开始评分" ? true : false;
    },
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
    isMinScore() {
      if (this.baseInfo.singleScore < 0) {
        return this.baseInfo.singleScore;
      } else {
        return 0;
      }
    },
    isMaxScore() {
      if (this.baseInfo.singleScore > 0) {
        return this.baseInfo.singleScore;
      } else {
        return 0;
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    viewFile(file) {
      let { url } = file;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
      this.previewVisible = true;
    },
    //附件下载
    downloadFile(file) {
      let { url } = file;
      if (!url) {
        this.$message.success("文件不存在", 1.5);
        return;
      }
      downloadDfs(url);
    },

    getData() {
      Promise.all([this.getDetail(), this.getTableData()])
        .then()
        .finally((_) => {});
    },

    //查询详情
    getDetail() {
      let { uuid, tenantCode } = this.soucre;
      return new Promise((resolve, reject) => {
        axios
          .get(
            `/probusiness/qeTaskDeal/getConfigDetailData?id=${uuid}&tenantCode=${tenantCode}`,
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.resultData = res?.data || {};
            this.baseInfo = res.data?.qeEvaluationContent || {};
            if (this.soucre.title == "查看") {
              this.form = {
                finalScore: res.data?.finalScore ?? "",
                finalRemark: res.data?.finalRemark ?? "",
              };
            }
            resolve();
          })
          .catch((_) => {
            this.resultData = {};
            this.baseInfo = {};
            reject();
          });
      });
    },
    //查询表格
    getTableData() {
      return new Promise((resolve, reject) => {
        let { uuid, tenantCode } = this.soucre;
        axios
          .get(
            `/probusiness/qeTaskDeal/getFileRecordBatch?id=${uuid}&tenantCode=${tenantCode}`,
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.tableData = res.data || [];
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            reject();
          });
      });
    },

    //校验状态className
    checkStatusClass(row) {
      let { status = "" } = row;
      switch (status) {
        case 0:
          return "cancel";

        case 1:
          return "warn";

        case 2:
          return "lock";

        case 3:
          return "error";

        case 4:
          return "normal";

        default:
          return "cancel";
      }
    },

    handelOk() {
      let that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.$confirm({
            title: "提示",
            content: "您确定提交评分?",
            okText: "确定",
            cancelText: "取消",
            icon: () =>
              that.$createElement("a-icon", {
                props: {
                  key: "warning",
                  type: "exclamation-circle",
                  twoToneColor: "#faad14",
                },
              }),
            onOk() {
              let { uuid, tenantCode } = that.soucre;
              let { finalScore, finalRemark } = that.form;
              let formJson = {
                tenantCode,
                finalScore,
                finalRemark,
              };
              axios
                .post(
                  `/probusiness/qeTaskConfigDetail/saveOrUpdatePFData?id=${uuid}`,
                  formJson,
                  {
                    headers: {
                      "Content-Type": "application/json",
                    },
                  }
                )
                .then((res) => {
                  if (res.statusCode === 200 || res === 1) {
                    that.$message.success("操作成功", 1.5);
                    that.$emit("ok");
                    that.resetForm();
                  } else {
                    that.$message.error(res.message);
                  }
                })
                .catch((_) => {});
            },
          });
        }
      });
    },
    handelCancel() {
      this.$emit("cancel");
      this.resetForm();
    },
    resetForm() {
      this.form = {
        finalScore: "",
        finalRemark: "",
      };
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.start-rating-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .present-status {
    position: absolute;
    top: 14px;
    left: 140px;
    display: flex;
    align-items: center;
    .name {
      font-size: 14px;
      color: #999999;
    }
    .flow {
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      padding: 0 8px;
      text-align: center;
      height: 26px;
      line-height: 26px;
      &.normal {
        background: #4bc964;
      }
      &.warn {
        background: #ff993f;
      }

      &.error {
        background: #ff3f4a;
      }

      &.lock {
        background: #0098ff;
      }

      &.pass {
        background: #48c7cd;
      }

      &.cancel {
        background: #f1f2f7;
        color: #aab0bc;
      }
    }
  }
  .title {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #525a5d;
    padding-left: 20px;
    margin: 0px 0 10px 0;
  }
  /deep/.ant-form-item {
    display: flex;
    .ant-form-item-label {
      width: 140px;
      flex-shrink: 0;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
      textarea {
        height: 80px;
      }
      .ant-calendar-picker {
        width: 100%;
      }
    }
  }
  .unit {
    position: absolute;
    top: -12px;
    right: -22px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  .examine-container {
    padding-right: 60px;
    flex-shrink: 0;
    border-bottom: 1px solid @border-color;
  }
  .review-materials {
    border-bottom: 1px solid @border-color;
    padding: 10px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    .list-container {
      padding: 0 60px;
      flex: 1;
      height: 100%;
    }
  }
  .score-container {
    padding: 10px 60px 0 0px;
  }
}
</style>
